<template>
  <div class="home">
    <my-header></my-header>
    <task-List :isFinish="false">正在进行</task-List>
    <task-List :isFinish="true">已经完成</task-List>
    <div class="clear-box">
      <span>Copyright © 2014 todolist.cn</span>
      <span class="clearBtn" @click="clear">clear</span>
    </div>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import taskList from '@/components/taskList'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'Home',
  components: {
    myHeader,
    taskList
  },

  setup() {
    let store = useStore()
    let router = useRouter()
    function clear() {
      store.commit('clear', [])
      router.go(0)
    }

    return {
      clear
    }

  }
}
</script>
<style lang="scss" scoped>
.clear-box {
text-align: center;
color: #555;}
.clearBtn {
margin-left: 10px;
color: #777;
cursor: pointer;}
  
</style>
